<template>
  <view class="avatar-wrapper">
    <view class="avatar" v-if="type == 1">
      <img class="img" :src="avatar">
    </view>
    <view class="avatar-group" v-if="type == 2">
      <block  v-for="(it,i) of avatar" :key="i">
        <img class="img" :src="it" >
      </block>
    </view>
    <view class="avatar-text" v-if="type == 3">
      <text>{{ text | avatarText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'avatar_group',
  props: {
    avatar: Array | String,//头像组
    type: Number | String, //2单个头像，3群组聊天头像组，4默认头像提取文字
    text: String,//提取名称的一个字
  },
  filters:{
    avatarText(v){
      let length = v.length;
      if (length <= 2){
        return v;
      }else {
        return v.substring(length - 2,length);
      }

    }
  }
}
</script>

<style lang="scss" scoped="true">
.avatar-wrapper{
  width: 100upx;
  height: 100upx;
}
.avatar{
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  overflow: hiideen;
  background: #f1f1f1;
  .img{
    width:100%;
    height: 100%;
    border-radius: 50%;
  }
}
.avatar-group{
  display:flex;
  flex-wrap:wrap;
  .img{
    width: 50upx;
    height: 50upx;
    border-radius: 50%;
  }
}
.avatar-text{
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  overflow: hiideen;
  background: #e5e5e5;
  line-height: 100upx;
  text-align: center;
  font-size: 40upx;
  color: #fff;
}
</style>